[jQuery] 몇번째 요소인지 확인하는 방법 nth child

제이쿼리를 사용하여 특정 태그요소가 현재 몇번째 해당하는 요소인지 알아내는 방법으로 index() 메소드를 사용할 수 있습니다. index()를 사용하면 처음을 기준으로 몇번째 해당하는지 알려주게 됩니다. 간단한 문법은 아래와 같습니다.

$('선택요소').index();

# 몇번째 요소인지 왜 필요할까요? 언제 사용할 수 있을까요?

가장 많이 사용하는 이유 중 하나로 해당요소를 제어하기 위해서입니다. 보통 클래스명 또는 아이디 값을 사용하여 제어하지만 제어할 요소가 많거나 위치가 변하는 경우 위치를 알아내어 제이쿼리 요소로 제어하는 방법이 많이 사용됩니다. 이때 선택자 메소드인 eq()를 함께 사용할 수 있습니다.

간단한 예제로 좌측 컬럼에 100개의 스위치는 우측 컬럼 100개의 글을 순시는 기능을 제공한다고합시다. 이 경우 좌측과 우측 요소들은 서로 대응하기 때문에 좌측 위치를 통해 우측 요소를 제어할 수 있겠죠. 아래 예제를 봐주세요.

# 제이쿼리 index() 예제보기

아래 예제를 봐주세요. on / off라고 쓰여진 버튼을 클릭하면 아래에서 동일한 위치의 텍스트 영역이 사라지게 됩니다. 이때 해당 위치를 index()를 사용합니다. 그럼 아래 코드를 봐주세요.
@ index.html

아래는 스크립트 코드입니다.
@ index.js

좌측 요소를 클릭할 경우 우측 요소를 보이고 사라지게해주는 동작을 수행합니다. 이때 사라지는 방법으로 hide클래스명에 따라 동작하게 됩니다. 아래에 실제로 구현하기 위해 css를 다음과 같이 적용하였습니다. 참고하세요.

@ index.css